import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { Tag } from '@components'
import classNames from 'classnames'
import './index.scss'

export default class ItemList extends Component {
  static defaultProps = {
    list: [],
    showTitle: false,
    columnNum: 2
  }

  handleClick = (item) => {
    Taro.navigateTo({
      url: `/pages/item/item?itemId=${item.itemId}`
    })
  }

  render () {
    const { list, showTitle, columnNum } = this.props
    return (
      <View className='comp-item-list'>
        {
          showTitle &&
          <View className='comp-item-list__title'>
            {this.props.children}
          </View>
        }
        <View className='comp-item-list__wrap'>
          {list.map(item => (
            <View
              key={item.itemId}
              className={classNames('comp-item-list__item',
                {'col-2-item': columnNum === 2},
                {'col-3-item': columnNum === 3}
              )}
              onClick={this.handleClick.bind(this, item)}
            >
              <Image
                className={classNames('comp-item-list__item-img',
                  {'col-2-img': columnNum === 2},
                  {'col-3-img': columnNum === 3}
                )}
                src={item.itemImage} />
              {!!item.simpleDesc && !!item.simpleDescFlag &&
                <Text
                  className={classNames('comp-item-list__item-desc',
                    {'col-2-desc': columnNum === 2},
                    {'col-3-desc': columnNum === 3}
                  )}
                  numberOfLines={1} >
                  {item.simpleDesc}
                </Text>
              }
              <View className='comp-item-list__item-info'>
                {!!item.limitedTag &&
                  <Tag text={item.limitedTag} />
                }
                <Text className={classNames('comp-item-list__item-name',
                    {'col-2-name': columnNum === 2},
                    {'col-3-name': columnNum === 3}
                  )}>
                  {item.itemName}
                </Text>

                <View className='comp-item-list__item-price-wrap'>
                  <Text className={classNames('comp-item-list__item-price',
                      {'col-2-price': columnNum === 2},
                      {'col-3-price': columnNum === 3}
                    )}>
                    ¥{item.sellingPrice}
                  </Text>
                </View>
              </View>
            </View>
          ))}
        </View>
      </View>
    )
  }
}
